<template>
  <div class="posttable">
    <el-row>
      <el-col style="padding-right: 30px;padding-left: 60px;">
        <div class="addform addForm">
          <el-form :label-position="labelPosition" ref="form" :rules="rules" :model="form">
            <el-row class="change">
              <el-col :span="6">
                <el-form-item label="推送客户" prop="customerName" style="margin-bottom: 10px;">
                  <el-select
                    v-model.trim="form.customerName"
                    @change="selectcustomer"
                    placeholder="请选择推送客户"
                  >
                    <el-option
                      v-for="item in customerNames"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="!gjsshow">
                <el-form-item label="推送职位" prop="postName" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.postName" placeholder="请输入推送职位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="gjsshow">
                <el-form-item label="需求名称" prop="postName" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.postName" placeholder="请选择需求名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="职位级别" prop="postLevel" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.postLevel" placeholder="请输入职位级别"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="所属区域" prop="area" style="margin-bottom: 10px;">
                  <el-select v-model.trim="form.area" placeholder="请选择所属区域">
                    <el-option v-for="item in Areas" :key="item" :label="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="性别" prop="sex" style="margin-bottom: 10px;">
                  <el-select v-model.trim="form.sex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="姓名" prop="name" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="出生年月" prop="birthday" style="margin-bottom: 10px;">
                  <el-date-picker
                    v-model.trim="form.birthday"
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    type="month"
                    style="width: 274px;"
                    placeholder="选择日期"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="学历" prop="education" style="margin-bottom: 10px;">
                  <el-select v-model.trim="form.education" education placeholder="请选择学历">
                    <el-option
                      v-for="item in education"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="毕业院校" prop="college" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.college" placeholder="请输入毕业院校"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="专业" prop="speciality" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.speciality" placeholder="请输入专业"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="毕业时间" prop="graduationTime" style="margin-bottom: 10px;">
                  <el-date-picker
                    v-model.trim="form.graduationTime"
                    format="yyyy-MM"
                    type="month"
                    style="width: 274px;"
                    value-format="yyyy-MM"
                    placeholder="请输入毕业时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系方式" prop="phone" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.phone" placeholder="请输入联系方式"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="联系邮箱" prop="mail" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.mail" placeholder="请输入联系邮箱"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="离职状态" prop="status" style="margin-bottom: 10px;">
                  <el-select v-model.trim="form.status" placeholder="请选择离职状态">
                    <el-option
                      v-for="item in status"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="到岗时间" prop="entryTime" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.entryTime" placeholder="请输入到岗时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="当前薪资(单位(K))" prop="currentSalary" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.currentSalary" placeholder="请输入当前薪资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="!gjsshow">
                <el-form-item label="期望薪资(单位(K))" prop="expectSalary" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.expectSalary" placeholder="请输入期望薪资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="gjsshow">
                <el-form-item label="rate cate" prop="ratecode" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.ratecode" placeholder="请输入rate cate"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="!gjsshow">
                <el-form-item label="期望薪数" prop="expectSalaryNum" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.expectSalaryNum" placeholder="请输入期望薪数"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最低薪资(单位(K))" prop="miniSalary" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.miniSalary" placeholder="请输入最低薪资"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方便面试时间" prop="interviewTime" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.interviewTime" placeholder="请输入方便面试时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="工作年限" prop="workSeniority" style="margin-bottom: 10px;">
                  <el-input v-model.trim="form.workSeniority" placeholder="请输入工作年限"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-col :span="12" v-show="!gjsshow">
                  <el-form-item
                    label="备注"
                    prop="remark"
                    style="margin-bottom: 10px;"
                    class="remark"
                  >
                    <el-input v-model.trim="form.remark" placeholder="请输入备注" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-show="gjsshow">
                  <el-form-item
                    label="语言能力"
                    prop="remark"
                    style="margin-bottom: 10px;"
                    class="remark"
                  >
                    <el-input v-model.trim="form.remark" placeholder="请输入语言能力" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col :span="12">
                <el-form-item label="初步评价" prop="initialEvaluation" style="margin-bottom: 10px;">
                  <el-input
                    style="width: 100%;"
                    type="textarea"
                    v-model.trim="form.initialEvaluation"
                    placeholder="请输入初步评价"
                    :autosize="{ minRows: 4}"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <div style="max-width:32rem">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    type="file"
                    :action="actionurl"
                    :before-upload="beforeupload"
                    :show-file-list="true"
                    :file-list="fileList"
                    :on-success="handleAvatarSuccess"
                    :on-remove="handleRemove"
                    accept=".pdf, .docx, .doc"
                  >
                    <el-button class="upload" slot="trigger">选取中文文件</el-button>
                    <!--:limit="1"-->
                  </el-upload>
                </div>

                <!--filetype-->
              </el-col>
              <el-col style="margin-bottom: 30px;">
                <div
                  v-if="!filetype"
                  style="color: #F56C6C;color: #F56C6C;font-size: 12px;line-height: 1;padding-top: 4px;"
                >文件上传格式为pdf、docx、doc。</div>
                <div
                  v-if="selectfile"
                  style="color: #F56C6C;color: #F56C6C;font-size: 12px;line-height: 1;padding-top: 4px;"
                >请上传中文文件!</div>
              </el-col>
              <el-col v-if="gjsshow">
                <el-form-item style="margin-bottom: 10px;">
                  <div style="max-width:32rem;margin-top: 10px;">
                    <el-upload
                      class="upload-demo"
                      ref="upload1"
                      type="file"
                      :action="actionurl"
                      :before-upload="beforeupload1"
                      :show-file-list="true"
                      :file-list="fileList1"
                      :on-success="handleAvatarSuccess1"
                      :on-remove="handleRemove1"
                      :limit="2"
                      accept=".pdf, .docx, .doc"
                    >
                      <el-button class="upload" slot="trigger">选取英文文件</el-button>
                    </el-upload>
                  </div>
                </el-form-item>
                <el-col style="margin-bottom: 30px;">
                  <div
                    v-if="!filetype1"
                    style="color: #F56C6C;color: #F56C6C;font-size: 12px;line-height: 1;padding-top: 4px;"
                  >文件上传格式为pdf、docx、doc。</div>
                </el-col>
              </el-col>
              <el-col>
                <el-form-item>
                  <el-button class="save" :disabled="senddis" @click="submitForm('form')">提交</el-button>
                  <el-button class="cancel" @click="cancel('form')">取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="errorinfoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">{{errorinfo}}!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="errorinfoClose">确 定</el-button>
        <el-button round @click="errorinfoClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "addresume",

  data() {
    var checkexpectSalary = (rule, value, callback) => {
      // if (!value) {
      //   return callback(new Error('请输入期望薪资'));
      // }

      // var re = /^\d{1,2}-\d{1,2}$/;
      var re = /^(\d{1,2})+(\.\d{1,2})?-\d{1,2}$/;
      if (!this.error1) {
        setTimeout(() => {
          if (value) {
            if (!re.test(value)) {
              callback(new Error("期望薪资的格式为xx-xx且不得超过99"));
            } else {
              //字符串类型的数字类型进行比较时，如果是多位数的数字只会对第一位的数字进行比较，所以需要转换成number类型再进行比较
              var data = Number(value.split("-")[0]);
              var data1 = Number(value.split("-")[1]);
              if (data > data1) {
                callback(new Error("后面的数字必须大于前面的数字"));
              } else {
                callback();
              }
            }
          } else {
            callback();
          }
        }, 100);
      }
    };
    return {
      labelPosition: "top",
      form: {
        customerName: "",
        postName: "",
        postLevel: "",
        sex: "男",
        name: "",
        education: "",
        college: "",
        speciality: "",
        graduationTime: "",
        birthday: "",
        area: "",
        phone: "",
        mail: "",
        status: "",
        entryTime: "",
        currentSalary: "",
        expectSalary: "",
        ratecode: "",
        expectSalaryNum: "",
        miniSalary: "",
        interviewTime: "",
        remark: "",
        initialEvaluation: "",
        workSeniority: "",
        group: "",
        suffix: ""
      },
      requireNumout: false,
      customerNames: [],
      num: [],
      education: [
        {
          value: "大专"
        },
        {
          value: "本科"
        },
        {
          value: "硕士"
        },
        {
          value: "博士"
        }
      ],
      Areas: [],
      status: [
        {
          value: "在职"
        },
        {
          value: "离职"
        }
      ],
      customerId: "",
      rules: {
        customerName: [
          { required: false, message: "请选择推送客户", trigger: "change" }
        ],
        postName: [
          { required: false, message: "请输入推送职位", trigger: "blur" }
        ],
        postLevel: [
          { required: false, message: "请输入职位级别", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        birthday: [
          { required: false, message: "请输入出生年月", trigger: "blur" }
        ],
        education: [
          { required: true, message: "请选择学历", trigger: "change" }
        ],
        ratecode: [
          { required: true, message: "请输入rate cate", trigger: "blur" }
        ],
        college: [
          { required: true, message: "请输入毕业院校", trigger: "blur" }
        ],
        speciality: [
          { required: true, message: "请输入专业", trigger: "blur" }
        ],
        graduationTime: [
          { required: true, message: "请输入毕业时间", trigger: "blur" }
        ],
        area: [{ required: true, message: "请选择所属区域", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          {
            pattern: /(^0\d{2,4}\-\d{7,8}$)|(^1[3|4|5|6|7|8|9][0-9]{9}$)/,
            message: "请输入正确的联系方式",
            trigger: "blur"
          }
        ],
        mail: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^[A-Za-z\d]+(([-_.]*)+[A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
            message: "请输入正确的邮箱",
            trigger: "blur"
          }
        ],
        status: [
          { required: false, message: "请选择离职状态", trigger: "change" }
        ],
        entryTime: [
          { required: false, message: "请输入到岗时间", trigger: "blur" }
        ],
        currentSalary: [
          {
            pattern: /^\d{1,2}$/,
            message: "当前薪资为0-99的数字",
            trigger: "blur"
          }
        ],
        expectSalary: [
          { required: false, message: "请输入期望薪资", trigger: "blur" },
          { validator: checkexpectSalary, trigger: "blur" }
        ],
        expectSalaryNum: [
          { required: false, message: "请输入期望薪数", trigger: "blur" },
          {
            pattern: /^\d{1,2}$/,
            message: "期望薪数为0-99的数字",
            trigger: "blur"
          }
        ],
        miniSalary: [
          {
            pattern: /^\d{1,2}$/,
            message: "最低薪资为0-99的数字",
            trigger: "blur"
          }
        ],
        workSeniority: [
          { required: true, message: "请输入工作年限", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{0,6}$/,
            message: "工作年限的长度范围为0-6",
            trigger: "blur"
          }
        ]
      },
      filetype: true,
      file: {},
      selectfile: false,
      fileList: [],
      fileUrl: "",
      name: "",
      savedis: false,
      senddis: false,
      gjsshow: false,
      errordialogVisible: false,
      errorinfo: null,
      fileList1: [],
      filetype1: true,
      file1: {},
      actionurl: null
    };
  },
  created() {
    this.actionurl = this.url + "/statistics/entryInfo/upload";
    axios.post(this.url + "/resumeUpload/getCustomerNames").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.customerNames = res.data.data;
      }
    });
    axios.get(this.url + "/demand/getAreas").then(res => {
      this.unlogin(res.data.code);
      if (res.data.code == 200) {
        this.Areas = res.data.data;
      }
    });
  },
  methods: {
    selectcustomer() {
      this.form.postName = "";
      this.form.requireNum = "";
      this.form.postLevel = "";
      this.form.ratecode = "";
      this.file1 = {};
      this.fileList1 = [];
      this.filetype1 = true;
      if (this.form.customerName == "港交所") {
        this.gjsshow = true;
        this.form.expectSalary = "";
        this.form.expectSalaryNum = "";
        this.form.remark = "";
      } else {
        this.gjsshow = false;
      }
    },
    clearData() {
      this.requireNumout = false;
      this.errorinfo = null;
    },
    handleAvatarSuccess(res, file) {
      this.form.originalFilename = res.data.fileName;
      this.form.fileAddress = res.data.fileAddress;
      this.form.group = res.data.group;
      this.form.suffix = res.data.suffix;
    },
    handleRemove1(file, fileList) {
      this.fileList1 = [];
      this.file = {};
      this.form.fileNameEn = "";
      this.form.fileAddrEn = "";
    },
    submitForm(formName) {
      if (this.file.name == undefined) {
        this.selectfile = true;
      } else {
        this.selectfile = false;
      }
      this.$refs[formName].validate(valid => {
        if (valid && !this.selectfile  && this.filetype  && this.filetype1) {
          this.senddis = true;
          this.form.resumeStatus = "mail";
          this.$refs.upload.submit();
          axios
            .post(this.url + "/resumeUpload/addResume", this.form)
            .then(res => {
              this.unlogin(res.data.code);
              if (res.data.code == 200) {
                if (res.data.message == "success") {
                  this.senddis = false;
                  this.clearData();
                  this.$emit("getData");
                }

                if (res.data.message == "存在该简历信息") {
                  this.senddis = false;
                  this.errorinfo = res.data.message;
                  document.documentElement.style.overflow = "hidden";
                  this.errordialogVisible = true;
                }

                if (res.data.message == "该需求已关闭") {
                  this.requireNumout = true;
                  this.senddis = false;
                }
              }
            });
        }
      });
    },
    handleAvatarSuccess1(res, file) {
      this.form.fileNameEn = res.data.fileName;
      this.form.fileAddrEn = res.data.fileAddress;
    },
    beforeupload(file) {
      this.file = {};
      this.file = file;
      this.selectfile = false;
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
      this.filetype = ((testmsg == 'docx') || (testmsg == 'pdf') || (testmsg == 'doc'));
    
      if(this.filetype){
          this.file = file;
          this.fileList = [];
          this.fileList.push(this.file);
      }
    
      return (this.filetype)
    },
    beforeupload1(file) {
      this.file1 = {};
      this.file1 = file;
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
      this.filetype1 = ((testmsg == 'docx') || (testmsg == 'pdf') || (testmsg == 'doc'));
      if(this.filetype1){
          this.file1 = file;
          this.fileList1 = [];
          this.fileList1.push(this.file1);
      }
      return (this.filetype1)
    },
    handleRemove(file, fileList) {
      this.file = {};
      this.fileList = [];
    },
    errorinfoClose() {
      this.errorinfo = null;
      document.documentElement.style.overflow = "auto";
      this.errordialogVisible = false;
    },
    initdata() {
      this.senddis = false;
      this.savedis = false;
      this.form = {
        customerName: "",
        postName: "",
        postLevel: "",
        requireNum: "",
        sex: "男",
        name: "",
        education: "",
        college: "",
        speciality: "",
        graduationTime: "",
        birthday: "",
        area: "",
        phone: "",
        mail: "",
        status: "",
        entryTime: "",
        currentSalary: "",
        expectSalary: "",
        ratecode: "",
        expectSalaryNum: "",
        miniSalary: "",
        interviewTime: "",
        remark: "",
        initialEvaluation: "",
        group: "",
        suffix: ""
      };
      this.num = [];
    },
    cancel(formName) {
      this.savedis = false;
      this.senddis = false;
      this.clearData();
      this.$emit("getData");
    },
  }
};
</script>
<style scoped>
.addform {
  color: #333 !important;
}

.storage {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #4e72f3;
  border-radius: 4px;
  margin-right: 43px;
  border-color: #4e72f3;
}

.save {
  width: 150px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border-radius: 4px;
  margin-right: 43px;
  background: linear-gradient(to bottom, #5696f8 0%, #4e6ef5 100%);
}

.cancel {
  width: 150px;
  height: 40px;
  border: 1px solid #4e6ef5;
  font-size: 16px;
  font-weight: 500;
  color: #4e6ef5;
}

.upload {
  width: 194px;
  height: 44px;
  margin-top: 10px;
  /*margin-bottom: 30px;*/
}
</style>
